import QtQuick 2.0

Rectangle {
    id: container

    signal clicked
    property string text
    property string source
    property int indent: 8
    property int textSize: 20
    property string textFont: "Verdana"
    property color textColor: "#FFFFFFFF"
    property color selectColor: "#FF333333"
    property color unselectColor: "#FF666666"
    property color color2: "#FF666666"
    property int animationDuration: 300
    property bool isSelected: false

    width: 225
    height: 50
    color: "transparent"

    function updateColor() {
        if( isSelected )
            buttonRect.color = selectColor;
        else
            buttonRect.color = unselectColor;
    }

    function select() {
        buttonRect.color = selectColor;
        indent = 33;
        buttonRect.width = 225;
        isSelected = true;
    }

    function unselect() {
        buttonRect.color = unselectColor;
        indent = 8;
        buttonRect.width = 200;
        isSelected = false;
    }

    Rectangle {
        id: buttonRect

        width: 200
        height: 50
        color: color2

        Row {
            id: rowContainer
            spacing: 12
            anchors.top: parent.top
            anchors.topMargin: 8
            anchors.left: parent.left
            anchors.leftMargin: indent
            Image {
                id: buttonImage
                source: container.source
                width: container.height - 16
                height: container.height - 16
            }
            Text {
                id: buttonText
                anchors.verticalCenter: parent.verticalCenter
                color: container.textColor
                font.family: container.textFont
                font.pointSize: container.textSize
                text: container.text
            }

            Behavior on anchors.leftMargin { PropertyAnimation { easing.type: Easing.InOutQuad; duration: container.animationDuration; } }

        }
        MouseArea {
            id: mouseRegion
            anchors.fill: buttonRect
            onClicked: { container.clicked(); }
        }

        Behavior on width { PropertyAnimation { easing.type: Easing.InOutQuad; duration: container.animationDuration; } }
        Behavior on color { PropertyAnimation { easing.type: Easing.InOutQuad; duration: container.animationDuration; } }
    }
}
